<template>
  <div class="form-modal">
    <a-modal
      title="预存款收款"
      :width="750"
      style="top: 50px;"
      :visible="visible"
      @cancel="handleCancel"
    >

      <div class="table-page-search-wrapper" >
        <a-spin :spinning="spinning">
          <a-form :form="form" layout="inline">
            <div class="row-wrapper">
              <a-descriptions :column="3">
                <a-descriptions-item label="客户卡号" >{{ details.cardNo }}</a-descriptions-item>
                <a-descriptions-item label="姓名">{{ details.name }}</a-descriptions-item>
                <a-descriptions-item label="联系方式" >{{ details.contactContent }}</a-descriptions-item>
                <a-descriptions-item label="开单金额" > <span class="g-color">{{details.totalPayableAmt}}</span></a-descriptions-item>
                <a-descriptions-item label="主诉项目" >{{ details.receiveItemName }}</a-descriptions-item>
              </a-descriptions>
              <a-row :gutter="12">
                <a-col :span="12" >
                  <a-form-item label="现金" :validate-status="xj.status" :help="xj.message" >
                    <a-input
                      type="number"
                      @change="e=>onChangeInput(e,'xj')"
                      prefix="￥"
                      suffix="元"
                      placeholder="0"
                      v-model="xj.value"/>
                  </a-form-item>
                </a-col>
                <a-col :span="12" >
                  <a-form-item label="转账" :validate-status="zz.status" :help="zz.message" >
                    <a-input
                      type="number"
                      @change="e=>onChangeInput(e,'zz')"
                      prefix="￥"
                      suffix="元"
                      placeholder="0"
                      v-model="zz.value"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="[16]">

                <a-col :span="12" >
                  <a-input-group >
                    <a-row :gutter="0">
                      <a-col :span="12">
                        <a-form-item label="刷卡" :validate-status="skType.status" :help="skType.message">
                          <a-select
                            @change="changeSelect"
                            allow-clear
                            style="width: 100%"
                            v-model="skType.value"
                            placeholder="银行卡类型">
                            <a-select-option v-for="(item,index) in cardTypeArr" :key="index" :value="item.id">
                              {{ item.name }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item :validate-status="sk.status" :help="sk.message">
                          <a-input
                            type="number"
                            @change="e=>onChangeInput(e,'sk')"
                            prefix="￥"
                            suffix="元"
                            placeholder="0"
                            style="width: 100%"
                            v-model="sk.value"
                          />
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-input-group>
                </a-col>
                <!--              <a-col :span="12" >-->
                <!--                <a-form-item label="赠送金额" has-feedback>-->
                <!--                  <a-input prefix="￥" suffix="元" placeholder="0" v-decorator="['1', {rules: [{ required: false, message: '请输入金额！' }]}]"/>-->
                <!--                </a-form-item>-->
                <!--              </a-col>-->
              </a-row>
              <a-row :gutter="16">
              </a-row>
              <a-row style="margin-bottom: 40px;" :gutter="[16]">
                <a-col :span="12" >
                  <a-form-item label="备注" has-feedback>
                    <a-textarea
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="['adstract', {rules: [{ required: false, message: '请输入内容！' }]}]"
                    >
                    </a-textarea>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-form>
        </a-spin>

      </div>
      <div slot="footer" class="g-flex g-y-center g-x-between">
        <div class="g-flex g-y-center">
          <div ><span style="font-size: 18px;">合计：</span><span class="g-color" style="font-size: 24px;">{{ sumAmt }}</span></div>
          <div ><span style="font-size: 18px;margin-left: 20px;">剩余金额：</span><span  style="font-size: 24px;color: #E90303;">{{ surplus }}</span></div>
        </div>
        <div class="g-flex g-x-end g-y-center">
          <a-form-item has-feedback style="padding: 0;margin: 0;margin-right: 15px;">
            <a-checkbox v-decorator="['isPrint']" >收款后打印</a-checkbox>
          </a-form-item>
          <a-button @click="visible=false">取消</a-button>
          <a-button type="primary" @click="submit" :loading="confirmLoading">确定</a-button>
        </div>
      </div>
    </a-modal>
  </div>

</template>

<script>
import { getConsultationAppeal } from '@/api/modular/main/customer/customerConsultation'
import {getDepositPaymentInfo,depositPayment} from '@/api/modular/main/customer/cashier'
const validateArr = ['xj','sk','zz','skType']

export default {
  props:{
    row_record:{
      type:Object,
      default:()=>{{}}
    }
  },
  data () {
    return {
      spinning:false,
      xj:{
        value:'',
        status:'',
        message:''
      },
      zz:{
        value:'',
        status:'',
        message:''
      },
      sk:{
        value:'',
        status:'',
        message:''
      },
      skType:{
        value:undefined,
        status:'',
        message:''
      },
      visible:false,
      confirmLoading:false,
      form: this.$form.createForm(this),
      details:{},
      ConsultationAppeal: [],
      checkbox_value:[],
      cardTypeArr:[
        {name:'中国农业银行',id:1},
        {name:'中国建设银行',id:2},
      ]
    }
  },
  watch:{
    form(){
      const xj_value =this.form.getFieldValue('xj')
      console.log('aaa',xj_value)
    }
  },
  computed:{
    sumAmt(){
      const zz_value = parseFloat(this.zz.value)?parseFloat(this.zz.value):0
      const sk_value = parseFloat(this.sk.value)?parseFloat(this.sk.value):0
      const xj_value = parseFloat(this.xj.value)?parseFloat(this.xj.value):0
      const sum = zz_value + sk_value + xj_value
      return sum ? sum : 0
    },
    surplus(){
      const zz_value = parseFloat(this.zz.value)?parseFloat(this.zz.value):0
      const sk_value = parseFloat(this.sk.value)?parseFloat(this.sk.value):0
      const xj_value = parseFloat(this.xj.value)?parseFloat(this.xj.value):0
      const result = this.details.totalPayableAmt - zz_value - sk_value - xj_value
      // return typeof result == 'number' ?result:this.details.totalPayableAmt
      return result.toFixed(2)
    }
  },
  created() {
    getConsultationAppeal().then(res => {
      this.ConsultationAppeal = res.data
    })
  },
  methods: {
    show () {
      this.visible = true
      this.form.resetFields()
      validateArr.forEach(key=>{
        this[key].status=''
        this[key].message=null
        this[key].value=undefined
      })
      this.$nextTick(()=>{
        console.log('开单行数据：',this.row_record)
        const orderId = this.row_record.orderId
        this.spinning=true
        getDepositPaymentInfo({orderId}).then(res=>{
          this.spinning=false
          if(res.code==200){
            console.log('请求的预存款收费详情：',res)
            this.details=res.data
          }else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    clearValidate(){
      validateArr.forEach(key=>{
        this[key].status='success'
        this[key].message=null
      })
    },
    changeSelect(value) {
      this.skType.value = value
      this.skType.status='success'
      this.skType.message=null
      if(this.sk.value && this.skType.value){
       this.clearValidate()
      }
    },
    onChangeInput(e,key){
      console.log(key)
      const value = e.target.value
      if(value<0){
        this[key].status='error'
        this[key].message='必须为非负数'
        return
      }else{
        this[key].status='success'
        this[key].message=null
      }
      if(key=='xj' || key=='zz' || (key == 'sk' && this.skType.value)){
        this.clearValidate()
      }
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },

    checkIsNull(value){
      if(typeof(value)=='undefined' ||!value || value==0){
        return true
      }
      return false
    },
    /**
     表单校验-金额
     * */
    validatorPrice(rule, value, callback) {
      if (value <0) {
        callback('必须为非负数')
      }
      callback()
    },
    /**
     提交表单
     * */
    submit(){

      this.confirmLoading = true
      const sk = this.sk.value
      const xj = this.xj.value
      const zz = this.zz.value
      const skType = this.skType.value
      if((this.checkIsNull(sk)|| this.checkIsNull(skType)) && this.checkIsNull(xj) && this.checkIsNull(zz)){
        console.log('表单检验未通过errors')
        this.xj.status='error'
        this.xj.message='必须填写其中一个'

        this.zz.status='error'
        this.zz.message='必须填写其中一个'

        this.sk.status='error'
        this.sk.message='必须填写其中一个'

        this.skType.status='error'
        this.skType.message='请选择类型'

        this.confirmLoading = false
        return
      }
      if(validateArr.some(item=>this[item].status=='error')){
        this.confirmLoading = false
        console.log('表单检验未通过errors')
        return
      }
      if(this.surplus>0){
        this.$message.error('剩余金额必须为0')
        this.confirmLoading = false
        return
      }
      const values = this.form.getFieldsValue()
      this.confirmLoading = false
      const params = {
        orderId:this.row_record.orderId,
        billId:this.row_record.billId,
        payAmt:this.row_record.totalPayableAmt,
        xj : this.xj.value,
        zz : this.zz.value,
        sk : this.sk.value,
        skType : this.skType.value,
        ...values
      }
      depositPayment(params).then(res=>{
        if(res.code==200){
          this.$message.success({
            content:res.message,
            duration:0.5,
            onClose:()=>{
              this.visible=false
              this.$emit('refresh')
            }
          })
        }else{
          this.$message.info(res.message)
        }
      }).finally(()=>{
        this.confirmLoading = false
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body{
  padding-bottom: 0px;
}
.col-form-item{
  padding: 0 4px  20px;
}
/deep/ .ant-modal-footer{
  border-top: none !important;
}

/deep/ .ant-form-item-control {
  width: 100%;
}
.width-class{
  width: 200px;
}
</style>

